<template>
  <view class="goods_list">
      <search></search>
        <u-tabs
            :list="list" 
            :is-scroll="false" 
            :current="current" 
            @change="change"
            active-color="#ea4350"
            bar-width="130"
            >
        </u-tabs>

        <view v-if="current===0">
            <view class="goods-content">
        <navigator
          class="goods-item"
          v-for="item in goods"
          :key="item.goods_id"
          :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}`"
        >
          <view class="goods-item-img">
            <u-image
              :src="item.goods_small_logo||src"
              width="191"
              height="191"
            ></u-image>
          </view>
          <view class="goods-item-info">
            <view class="goods_name">{{item.goods_name}}</view>
            <view class="goods_price">￥{{item.goods_price}}</view>
          </view>
        </navigator>
      </view>
        </view>
        <view v-if="current===1">
            222
        </view>
        <view v-if="current===2">
            333
        </view>
      
  </view>
</template>

<script>
import search from '../../components/search/search.vue';
	export default {
  components: { search },
		data() {
			return {
				list: [{
					name: '综合'
				}, {
					name: '销量'
				}, {
					name: '价格'
					// count: 5
				}],
				current: 0,
                // 商品列表
                goods: [],
                // 默认图片地址
                src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.2qqtouxiang.com%2Fpic%2FTX9669_01.jpg&refer=http%3A%2F%2Fimg.2qqtouxiang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648372748&t=bdad7fa9a3908defe372556a009ae987"
			}
		},
		methods: {
			change(index) {
				this.current = index;
			}
            ,
            // 获取商品列表数据
            async getGoodsList() {
            const res = await this.$u.http.get("/goods/search", this.params);
            // console.log(res);
            // 获取要渲染的数据  数组合并
            this.goods = [...this.goods, ...res.goods];
            // 获取数据总条数
            this.total = res.total;
            },
		},
        onLoad(options) {
            const { cid } = options;
            // 定义 接口要的参数
            this.params = {
            // 否	string	关键字
            query: "",
            // 否	string	分类id
            cid: cid,
            // 否	number	页码
            pagenum: 1,
            // 否	number	页容量  默认值 20
            pagesize: 20,
            };

            // 发送请求获取数据
            this.getGoodsList();
            
        },
        // 滚动条触底
        onReachBottom() {
            // console.log("滚动条触碰到底部了");
            // 判断还有没有下一页数据
            if (this.goods.length >= this.total) {
            // 没有下一页数据
            uni.showToast({
                title: "没有下一页数据啦",
                icon: "none",
            });
            return;
            }
            console.log("还有下一页的数据");

            // 页码+1
            this.params.pagenum++;
            // 发送请求获取数据 数组合并
            this.getGoodsList();
        },

        // 页面下拉刷新
        async onPullDownRefresh() {
            // console.log("页面下拉刷新");

            // 充值页面的数据
            this.goods = [];
            // 重置页码
            this.params.pagenum = 1;
            // 发送请求
            await this.getGoodsList();

            // 必须等到数据回来 才关闭 关闭页面的下拉属性
            uni.stopPullDownRefresh();
        },
	}
</script>

<style lang="scss">
.goods-content {
  .goods-item {
    display: flex;
    margin-bottom: 10rpx;
    border-bottom: 1rpx solid #ccc;
    .goods-item-img {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .goods-item-info {
      flex: 2;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .goods_name {
      }
      .goods_price {
        color: $uni-them-color;
      }
    }
  }
}
</style>